<template>
  <div>
    <a-time-picker
      :value="start"
      @change="handleStartChange"
      :minute-step="minuteStep"
      :valueFormat="format"
      :format="format"
    />~
    <a-time-picker
      :value="end"
      @change="handleEndChange"
      :minute-step="minuteStep"
      :valueFormat="format"
      :format="format"
    />
  </div>
</template>
<style scoped></style>
<script>
export default {
  name: 'timeRange',
  props: {
    value: {
      type: Object
    },
    minuteStep: {
      type: Number,
      default: 1
    },
    format: {
      type: String,
      default: 'HH:mm'
    }
  },
  data() {
    const value = this.value || []
    return {
      start: value.start || '',
      end: value.end || ''
    }
  },
  watch: {
    value(val = []) {
      this.start = val.start || ''
      this.end = val.end || ''
    }
  },
  methods: {
    handleStartChange(e) {
      this.triggerChange({ start: e })
    },
    handleEndChange(e) {
      this.triggerChange({ end: e })
    },
    triggerChange(changedValue) {
      // Should provide an event to pass value to Form.
      this.$emit('change', Object.assign({}, this.$data, changedValue))
    }
  }
}
</script>
